<template>
    <section class="base-list custom-input">
        <el-row class="search">
            <el-form ref="form" :rules="rules" :inline="true" :model="condition" class="search-form" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="场区" prop="search_EQ_areaId">
                            <!--<el-input v-model="condition['search_LIKE_areaNo']"></el-input>-->
                            <auto-search-area-no @selectId="v=>condition['search_EQ_areaId']=v"
                                                 @selectName="v=>areaName=v"></auto-search-area-no>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <el-input v-model="condition['search_LIKE_containerNo']" @input="changeUp"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="尺寸">
                            <auto-search-size v-model="condition['search_LIKE_containerSize']"></auto-search-size>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="isShow">
                    <el-col :span="8">
                        <el-form-item label="箱主">
                            <auto-search-custom :isOwner="true"
                                                v-model="condition['search_EQ_ownerId']"></auto-search-custom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="货名">
                            <el-input v-model="condition['search_LIKE_cargoName']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="进场方式">
                            <el-select v-model="condition['search_EQ_inTransportMode']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictTransportModeType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="isShow">
                    <el-col :span="8">
                        <el-form-item label="空重">
                            <el-select v-model="condition['search_EQ_ifHeavy']" @change="handleChangeIfHeavy"
                                       placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="进出口">
                            <el-select v-model="condition['search_EQ_importAndExport']"
                                       placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictImportAndExportType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到发站">
                            <el-input v-model="condition['search_LIKE_stationName']" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="space-between" class="ml-80">
                    <el-col :span="19">
                        <div style="display: flex">
                            <div v-for="item in card" :key="item.name" class="card-place">
                                <div class="place-demo" :class="item.class"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <!--<el-tooltip class="item" effect="dark" content="双击箱显示详情" placement="top">-->
                        <el-button type="primary" icon="el-icon-search" @click="handleLoadData">查询
                        </el-button>
                        <!--</el-tooltip>-->
                        <el-button type="text" @click="isShow=!isShow">{{ isShow?'收起':'展开' }}
                            <i :class="isShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="border-line"></div>
        </el-row>
        <el-row>
            <div class="ml-80" style="margin-bottom:10px">
                <el-radio v-model="directive" label="cwbk" style="height:34px" size="small" border
                          v-if="power('WJOB_YARDPLAN_YARDMAP:POSTIONCTL')">场位布控
                </el-radio>
                <el-radio v-model="directive" label="yx" style="height:34px" size="small" border
                          v-if="power('WJOB_YARDPLAN_YARDMAP:MOVE')">发布移箱指令
                </el-radio>
                <el-radio v-model="directive" label="xbk" style="height:34px" size="small" border
                          v-if="power('WJOB_YARDPLAN_YARDMAP:CONTRCTL')">箱布控
                </el-radio>
                <el-button plain @click="reSet" style="margin-left:10px"
                           v-if="power('WJOB_YARDPLAN_YARDMAP:POSTIONCTL')||power('WJOB_YARDPLAN_YARDMAP:MOVE')||power('WJOB_YARDPLAN_YARDMAP:CONTRCTL')">
                    重 置
                </el-button>
                <span v-show="directive==='cwbk'||directive==='xbk'">
                    <el-button @click="handleDirective"
                               v-if="power('WJOB_YARDPLAN_YARDMAP:POSTIONCTL')||power('WJOB_YARDPLAN_YARDMAP:MOVE')||power('WJOB_YARDPLAN_YARDMAP:CONTRCTL')">确 定</el-button>
                </span>
                <span style="font-size: 12px;margin-left: 10px">双击箱显示详情</span>
                <ul class="search-ul" style="font-size: 14px;">
                    <li>进口*F：{{pageAcc.inF}} TEU；</li>
                    <li>进口*E：{{pageAcc.inE}} TEU；</li>
                    <li>出口*F：{{pageAcc.outF}} TEU；</li>
                    <li>出口*E：{{pageAcc.outE}} TEU；</li>
                </ul>
            </div>
        </el-row>
        <el-row class="content" v-loading="listLoading" :element-loading-text="'数据加载中'">
            <div class="box-map-flex" :style="'height:'+setHeight+'px'">
                <div class="box-flex box-set" ref="boxView" id="boxView"
                     :style="maxRow.length>0?'max-width:'+(bayWidth+40)+'px':'visibility:hidden;'">
                    <div v-show="!virtual" class="box-left" :style="'left:'+scrollLeft+'px'">
                        <div v-for="(h,i) in maxRow" :key="i"
                             :style="'height:'+rowHeight+'px;line-height:'+rowHeight+'px'">{{ (i+1)|zero }}
                        </div>
                    </div>

                    <div class="box-sets">
                        <div v-show="!virtual" class="box-header" :style="'width:'+bayWidth+'px;top:'+scrollTop+'px'">
                            <div class="box-headers" @dblclick="handleSelectAllBay(index)"
                                 v-for="(item,index) in maxBay" v-if="index%2==0" :key="index">{{index|odd}}
                            </div>
                        </div>
                        <div style="margin-left:40px;margin-top:40px;">
                            <div v-for="(row,rows) in maxRow" :key="rows" class="row" :style="'width:'+ bayWidth+'px'">
                                <div class="bay" v-for="(item,bay) in row" :key="bay" v-if="(bay+1)%2===0">
                                    <div v-for="(val,tier) in item" :key="tier" class="place"
                                         @click="handleClick(rows,bay,tier,val)"
                                         @dblclick="handleSelectAllTier(rows,bay,tier,val)">
                                        <p v-if="val.bayNo%2!==0"
                                           :class="[val.type,{'placeChecked':val.checked,'placeSelect':val.select}]"
                                           style="height:32px;">
                                            {{ val.containerNo }}
                                        </p>
                                        <p v-else class="even"
                                           :class="[val.type,{'placeChecked':val.checked,'placeSelect':val.select}]"
                                           :style="'display:'+val.style">
                                            {{val.containerNo}}
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div>-->
                <!--&lt;!&ndash;<el-card class="box-card" style="margin-bottom:10px">&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="box-card-top">&ndash;&gt;-->
                <!--&lt;!&ndash;<div v-for="item in card" :key="item.name" class="card-place">&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="place" :class="item.class" style="margin:0"></div>&ndash;&gt;-->
                <!--&lt;!&ndash;<span>{{ item.name }}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;</el-card>&ndash;&gt;-->
                <!--<el-card class="box-card box-font-style yard-detail-form">-->
                <!--&lt;!&ndash; <div class="box-card-top"> &ndash;&gt;-->
                <!--<el-form label-position="right" label-width="80px" :model="form">-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="箱主：">-->
                <!--{{ form.ownerName }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->

                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="箱型：">-->
                <!--{{ form.containerType }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="场位：">-->
                <!--{{ form.areaNo }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->

                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="尺寸：">-->
                <!--{{ form.containerSize }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="箱号：">-->
                <!--{{ form.containerNo }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->

                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="空重：">-->
                <!--{{ form.ifHeavy | _filterIfHeavyType }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="货主：">-->
                <!--{{ form.cargoOwnerName }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->

                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="内外贸：">-->
                <!--{{ form.tradeType | _filterTradeType }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="进场方式：">-->
                <!--{{ form.inTransportMode | _filterTransportModeType }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->

                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="货名：">-->
                <!--{{ form.cargoName }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="车皮/牌号：">-->
                <!--{{ form.inCarNo }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->

                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="货重：">-->
                <!--{{ form.cargoWeight }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row>-->
                <!--<el-col :span="24">-->
                <!--<el-form-item class="mb-0" label="进港时间：">-->
                <!--{{ form.inPortTime }}-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--</el-form>-->
                <!--&lt;!&ndash; </div> &ndash;&gt;-->
                <!--</el-card>-->
                <!--</div>-->
            </div>
        </el-row>
        <el-dialog title="移箱指令" :visible.sync="dialogForm" width="400px" style="margin-top:10vh">
            <div style="padding-left:30%">
                <div>箱 号： {{yxContainerNo}}</div>
                <div>现场位： {{position}}</div>
                <div>目的场位：{{purposePosition}}</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取 消</el-button>
                <el-button type="primary" @click="handleYx" :loading="$store.getters.loadingBtn">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    function getBay(num) {
        return (num + 1) / 2;
    }

    function setNum(val) {
        let num = Number(val);
        if (num > 0 && num < 10) {
            return "0" + num;
        } else {
            return num;
        }
    }

    import {
        ifHeavyType,
        tradeType,
        transportModeType
    } from "../../../assets/dict";
    import {
        getYardMap,
        yardMapControll,
        yardMapContainerControll,
        getYardMapContainerInfo,
        yxYardMap,
        yxYardMapAcc
    } from "@/api/yardPlan/yardPlan";
    import autoSearchAreaNo from "@/components/autocomplete/autoSearchAreaNo";
    import autoSearchSize from "@/components/autocomplete/autoSearchSize";
    import autoSearchCustom from "@/components/autocomplete/autoSearchCustom";
    // import yardMap from './map.vue';
    var time = null; //  在这里定义time 为null
    export default {
        name: "堆场图",
        components: {
            autoSearchAreaNo,
            autoSearchSize,
            autoSearchCustom
        },
        directives: {
            right: {
                inserted(el, binding) {
                    if (binding.value) {
                        // el.parentNode.style.textAlign = 'right'
                    }
                }
            }
        },
        data() {
            return {
                listLoading: false,
                condition: {
                    search_EQ_importAndExport: ""
                },
                areaName: "", // 场位名称
                directive: "",
                rules: {
                    search_EQ_areaId: [
                        { required: true, message: "请选择场区", trigger: "change" }
                    ]
                },
                isShow: false,
                maxBay: 33,
                maxRow: [],
                maxTier: 4,
                box: "",
                isScroll: false,
                scrollTop: 0,
                scrollLeft: 0,
                card: [
                    {
                        name: "进口重箱",
                        class: "JKZX"
                    },
                    {
                        name: "空箱",
                        class: "KX"
                    },
                    {
                        name: "出口重箱",
                        class: "CKZX"
                    },
                    {
                        name: "被选箱",
                        class: "BXX"
                    },
                    {
                        name: "被布控箱",
                        class: "BBKX"
                    },
                    {
                        name: "被布控场位",
                        class: "BBKCW"
                    },
                    {
                        name: "堆场整理箱",
                        class: "DCZLX"
                    }
                ],
                cwbk: [],
                xbk: [],
                form: {},
                containerYx: [],
                dialogForm: false,
                yxContainerNo: "",
                purposePosition: "",
                position: "",
                copyMaxRow: [],
                virtual: false,
                setHeight: 0,
                pageAcc: {},
            };
        },
        mounted() {
            // this.loadData()
            this.box = this.$refs.boxView;
            this.box.addEventListener(
                "scroll",
                res => {
                    let scrollTop = this.$refs.boxView.scrollTop;
                    let scrollLeft = this.$refs.boxView.scrollLeft;
                    // console.log(" scroll " + scrollLeft)
                    this.scrollTop = scrollTop;
                    this.scrollLeft = scrollLeft;
                    // 向下滚动的时候显示
                    this.isScroll = scrollTop > 0;
                },
                false
            );
            var a = document.getElementsByClassName("asideNav")[0].scrollHeight;
            this.setHeight = a - 300;
        },
        methods: {
            handleLoadData() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loadData();
                    } else {
                        this.$message({ message: "请检查表单", type: "error" });
                    }
                });
            },
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition);
                this.reSet();
                getYardMap(params).then(res => {
                    this.virtual = res.data.virtual;
                    let get = {
                        maxBay: 3,
                        maxRow: 3,
                        maxTier: 1
                    };
                    let data = res.data;
                    if (data.maxBay % 2 === 0) {
                        data.maxBay = data.maxBay + 1;
                    }
                    this.maxBay = data.maxBay;
                    this.maxTier = data.maxTier;
                    let [maxBay, maxRow, maxTier] = [
                        data.maxBay,
                        data.maxRow,
                        data.maxTier
                    ];
                    let tier = [];
                    for (let i = 0; i < maxTier; i++) {
                        tier.push({
                            containerNo: "",
                            type: ""
                        });
                    }
                    let bayNum = maxBay;
                    let bay = [];
                    for (let i = 0; i < bayNum + 1; i++) {
                        bay.push(tier);
                    }
                    let row = [];
                    for (let i = 0; i < maxRow; i++) {
                        row.push(bay);
                    }
                    console.log(row);
                    // 深拷贝!!!
                    this.maxRow = JSON.parse(JSON.stringify(row));
                    console.log(this.maxRow);
                    let newBay = data.container;
                    for (let i = 0; i < newBay.length; i++) {
                        if (newBay[i].bayNo % 2 === 0) {
                            this.maxRow[Number(newBay[i].rowNo - 1)][
                            Number(newBay[i].bayNo) - 1
                                ].splice(newBay[i].tierNo - 1, 1, {
                                containerNo: newBay[i].containerNo,
                                type: newBay[i].type,
                                checked: newBay[i].checked,
                                bayNo: Number(newBay[i].bayNo)
                            });
                            this.maxRow[Number(newBay[i].rowNo - 1)][
                            Number(newBay[i].bayNo) + 1
                                ].splice(newBay[i].tierNo - 1, 1, {
                                containerNo: newBay[i].containerNo,
                                type: newBay[i].type,
                                checked: newBay[i].checked,
                                bayNo: Number(newBay[i].bayNo),
                                style: "none"
                            });
                        } else {
                            console.log(newBay[i]);
                            console.log(newBay[i].tierNo);
                            this.maxRow[Number(newBay[i].rowNo - 1)][
                                Number(newBay[i].bayNo)
                                ].splice(newBay[i].tierNo - 1, 1, {
                                containerNo: newBay[i].containerNo,
                                type: newBay[i].type,
                                checked: newBay[i].checked,
                                bayNo: Number(newBay[i].bayNo)
                            });
                        }
                    }
                    // 拷贝
                    this.copyMaxRow = JSON.parse(JSON.stringify(this.maxRow));
                    console.log(this.maxRow);
                    let select = res.data.container.find(item => {
                        return item.checked;
                    });
                    console.log(select);
                    this.$nextTick(() => {
                        if (select) {
                            let top = 0;
                            let left = 0;
                            if (Number(select.rowNo) > 3) {
                                top = Number(select.rowNo) * maxTier * 30;
                            }
                            if (Number(select.bayNo) > 20) {
                                left = Number(select.bayNo) * 17;
                            }
                            let view = document.getElementById("boxView");
                            view.scrollTo(left, top);
                        }
                    });
                });
                yxYardMapAcc(params).then(res => {
                    this.pageAcc = res.data
                });
            },
            handleClick(r, b, t, v) {
                clearTimeout(time); //首先清除计时器
                time = setTimeout(() => {
                    // console.log(this.maxRow);
                    if (!this.directive) {
                        if (v.containerNo) {
                            getYardMapContainerInfo(v.containerNo).then(res => {
                                this.form = res.data;
                            });
                        }
                    } else if (this.directive === "cwbk") {
                        if (!v.containerNo) {
                            let data = {
                                bayNo: setNum(b),
                                rowNo: setNum(r + 1),
                                tierNo: t + 1,
                                ...v,
                                rbt: setNum(b) + setNum(r + 1) + (t + 1)
                            };
                            if (!v.select) {
                                data.select = true;
                                this.cwbk.push(data);
                                this.changeType(r, b, t, data);
                            } else {
                                data.select = false;
                                console.log(data);
                                for (let i = 0; i < this.cwbk.length; i++) {
                                    if (this.cwbk[i].rbt.indexOf(data.rbt) > -1) {
                                        this.cwbk.splice(i, 1);
                                    }
                                }
                                this.changeType(r, b, t, data);
                            }
                        } else {
                            this.$message({
                                message: "请选择空场位进行布控!",
                                type: "error"
                            });
                        }
                    } else if (this.directive === "xbk") {
                        if (v.containerNo) {
                            let data = {
                                bayNo: setNum(b),
                                rowNo: setNum(r + 1),
                                tierNo: t + 1,
                                ...v,
                                rbt: setNum(b) + setNum(r + 1) + (t + 1)
                            };
                            if (!v.select) {
                                data.select = true;
                                this.xbk.push(data);
                                this.changeType(r, b, t, data);
                            } else {
                                data.select = false;
                                for (let i = 0; i < this.xbk.length; i++) {
                                    if (this.xbk[i].rbt.indexOf(data.rbt) > -1) {
                                        this.xbk.splice(i, 1);
                                    }
                                }
                                this.changeType(r, b, t, data);
                            }
                        } else {
                            this.$message({ message: "请选择箱!", type: "error" });
                        }
                    } else if (this.directive === "yx") {
                        console.log(r, b, t, v);
                        if (this.containerYx.length === 0) {
                            if (v.containerNo) {
                                let data = {
                                    bayNo: setNum(b),
                                    rowNo: setNum(r + 1),
                                    tierNo: t + 1,
                                    ...v,
                                    rbt: setNum(b) + setNum(r + 1) + (t + 1)
                                };
                                if (!v.select) {
                                    data.select = true;
                                    this.containerYx.push(data);
                                    this.changeType(r, b, t, data);
                                } else {
                                    data.select = false;
                                    for (
                                        let i = 0;
                                        i < this.containerYx.length;
                                        i++
                                    ) {
                                        if (
                                            this.containerYx[i].rbt.indexOf(
                                                data.rbt
                                            ) > -1
                                        ) {
                                            this.containerYx.splice(i, 1);
                                        }
                                    }
                                    this.changeType(r, b, t, data);
                                }
                            } else {
                                this.$message({
                                    message: "请先选择箱!",
                                    type: "error"
                                });
                            }
                        } else {
                            if (v.select) {
                                // 点击已选择则删除
                                let data = {
                                    bayNo: setNum(b),
                                    rowNo: setNum(r + 1),
                                    tierNo: t + 1,
                                    ...v,
                                    select: false,
                                    rbt: setNum(b) + setNum(r + 1) + (t + 1)
                                };
                                this.containerYx.splice(0, 1);
                                this.changeType(r, b, t, data);
                                return;
                            }
                            if (v.type) {
                                this.$message({
                                    message: "请选择空场位!",
                                    type: "error"
                                });
                            } else {
                                for (let i = 0; i < t; i++) {
                                    if (!this.maxRow[r][b][i].containerNo) {
                                        this.$message({
                                            message:
                                                "该场位布不能放箱。原因：底层无箱"
                                        });
                                        return;
                                    }
                                }
                                const yx = this.containerYx[0];
                                if (yx.bayNo % 2 === 0) {
                                    b = b + 1;
                                }
                                let position = `${this.areaName}-${setNum(
                                    yx.bayNo
                                )}-${setNum(yx.rowNo)}-${yx.tierNo}`;
                                let purposePosition = `${this.areaName}-${setNum(
                                    b
                                )}-${setNum(r + 1)}-${t + 1}`;
                                this.yxContainerNo = yx.containerNo;
                                this.position = position;
                                this.purposePosition = purposePosition;
                                this.dialogForm = true;
                            }
                        }
                    }
                    console.log(r, b, t, v);
                    // this.maxRow[r][b].splice(t,1,{containerNo:'555',type:'blue'})
                }, 200); //大概时间300ms
            },
            handleYx() {
                let data = {
                    currPosition: this.position,
                    endPosition: this.purposePosition,
                    containerNo: this.yxContainerNo
                };
                yxYardMap(data).then(res => {
                    this.$message({
                        type: "success",
                        message: "移箱成功!"
                    });
                    this.dialogForm = false;
                    this.loadData();
                });
            },
            handleDirective() {
                console.log(this.directive);
                if (this.directive === "cwbk") {
                    if (this.cwbk.length === 0) {
                        this.$message({
                            message: "请先选择一个场位!",
                            type: "error"
                        });
                        return null;
                    }
                    this.cwbk.forEach(f => {
                        if (f.type) {
                            f.bayNo = setNum(f.bayNo);
                        }
                    });
                    console.log(this.cwbk);
                    let data = {
                        containerYard: this.cwbk
                    };
                    yardMapControll(this.condition["search_EQ_areaId"], data).then(
                        res => {
                            this.$message({
                                message: "场位布控成功!",
                                type: "success"
                            });
                            this.cwbk = [];
                            // this.directive = "";
                            this.loadData();
                        }
                    );
                }
                if (this.directive === "xbk") {
                    if (this.xbk.length === 0) {
                        this.$message({
                            message: "请选择需要布控的集装箱!",
                            type: "error"
                        });
                        return null;
                    }
                    let data = {
                        container: this.xbk
                    };
                    yardMapContainerControll(
                        this.condition["search_EQ_areaId"],
                        data
                    ).then(res => {
                        this.$message({ message: "箱布控成功!", type: "success" });
                        this.xbk = [];
                        // this.directive = "";
                        this.loadData();
                    });
                }
                if (this.directive === "yx") {
                    console.log("移箱操作");
                }
            },
            changeType(r, b, t, v) {
                this.maxRow[r][b].splice(t, 1, v);
            },
            handleScroll() {
                //改变元素#searchBar的top值
                var scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                var offsetTop = document.querySelector("#searchBar").offsetTop;

                if (scrollTop <= 200) {
                    offsetTop = 300 - Number(scrollTop);
                    document.querySelector("#searchBar").style.top =
                        offsetTop + "px";
                } else {
                    document.querySelector("#searchBar").style.top = "100px";
                }
            },
            reSet() {
                this.directive = "";
                this.maxRow = JSON.parse(JSON.stringify(this.copyMaxRow));
                this.containerYx.splice(0, this.containerYx.length);
                this.cwbk.splice(0, this.cwbk.length);
                this.xbk.splice(0, this.xbk.length);
            },
            handleChangeIfHeavy(val) {
                if (val === "E" || !val) {
                    this.condition["search_EQ_importAndExport"] = "";
                }
            },
            handleSelectAllBay(index) {
                console.log(index);
            },
            handleSelectAllTier(row, bay, tier, val) {
                clearTimeout(time); //清除
                if (!this.directive) {
                    if (val.containerNo) {
                        getYardMapContainerInfo(val.containerNo).then(res => {
                            if (res.data.importAndExport === "I") {
                                res.data.importAndExport = "进口"
                            } else {
                                res.data.importAndExport = "出口"
                            }
                            let html = res.data;
                            html.ifHeavy = ifHeavyType.get(html.ifHeavy);
                            html.tradeType = tradeType.get(html.tradeType);
                            html.inTransportMode = transportModeType.get(
                                html.inTransportMode
                            );
                            html.ownerName = html.ownerName || "";
                            html.containerType = html.containerType || "";
                            html.areaNo = html.areaNo || "";
                            html.containerSize = html.containerSize || "";
                            html.containerNo = html.containerNo || "";
                            html.ifHeavy = html.ifHeavy || "";
                            html.cargoOwnerName = html.cargoOwnerName || "";
                            html.tradeType = html.tradeType || "";
                            html.inTransportMode = html.inTransportMode || "";
                            html.cargoName = html.cargoName || "";
                            html.inCarNo = html.inCarNo || "";
                            html.cargoWeight = html.cargoWeight || "";
                            html.inPortTime = html.inPortTime || "";
                            this.$alert(
                                `
                            <div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">箱主：</div>${
                                    html.ownerName
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">箱型：</div>${
                                    html.containerType
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">场位：</div>${
                                    html.areaNo
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">尺寸：</div>${
                                    html.containerSize
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">箱号：</div>${
                                    html.containerNo
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">空重：</div>${
                                    html.ifHeavy
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">货主：</div>${
                                    html.cargoOwnerName
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">内外贸：</div>${
                                    html.tradeType
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">进场方式：</div>${
                                    html.inTransportMode
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">货名：</div>${
                                    html.cargoName
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">车皮/牌号：</div>${
                                    html.inCarNo
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">货重：</div>${
                                    html.cargoWeight
                                    }</div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">进港时间：</div>${
                                    html.inPortTime
                                    }
                                            </div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">到发站：</div>${
                                    html.stationName
                                    }
                                            </div>
                                            <div style="display: flex;margin-bottom: 5px">
                                            <div style="width: 100px;text-align: right">进出口：</div>${
                                    html.importAndExport
                                    }
                                            </div>


                                          </div>`,
                                "箱信息",
                                {
                                    dangerouslyUseHTMLString: true,
                                    closeOnClickModal: true
                                }
                            );
                            // this.$notify({
                            //     title: '箱信息',
                            //     dangerouslyUseHTMLString: true,
                            //     position: 'top-left',
                            //     duration: 10000,
                            //     message: `<div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">箱主：</div>${html.ownerName}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">箱型：</div>${html.containerType}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">场位：</div>${html.areaNo}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">尺寸：</div>${html.containerSize}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">箱号：</div>${html.containerNo}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">空重：</div>${html.ifHeavy}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">货主：</div>${html.cargoOwnerName}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">内外贸：</div>${html.tradeType}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">进场方式：</div>${html.inTransportMode}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">货名：</div>${html.cargoName}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">车皮/牌号：</div>${html.inCarNo}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">货重：</div>${html.cargoWeight}</div>
                            //                 <div style="display: flex;margin-bottom: 5px">
                            //                 <div style="width: 100px;text-align: right">进港时间：</div>${html.inPortTime}</div>
                            //               </div>`
                            // });
                        });
                    }
                }
                if (this.directive !== "cwbk") {
                    return;
                }
                console.log(row, tier);
                let maxRow = JSON.parse(JSON.stringify(this.maxRow));
                if (val.type === "") {
                    for (let i = 0; i < this.maxBay + 1; i++) {
                        if (i === 1 || i % 2 !== 0) {
                            console.log(i);
                            let data = {
                                ...val,
                                bayNo: setNum(i),
                                rowNo: setNum(row + 1),
                                tierNo: tier + 1,
                                rbt: setNum(i) + setNum(row + 1) + (tier + 1)
                            };
                            if (
                                maxRow[row][i][tier].type === "" &&
                                !maxRow[row][i][tier].select
                            ) {
                                this.maxRow[row][i].splice(tier, 1, {
                                    ...val,
                                    select: true
                                });
                                this.cwbk.push(data);
                            } else if (
                                maxRow[row][i][tier].type === "" &&
                                maxRow[row][i][tier].select
                            ) {
                                this.maxRow[row][i].splice(tier, 1, {
                                    ...val,
                                    select: false
                                });
                                for (let j = 0; j < this.cwbk.length; j++) {
                                    if (this.cwbk[j].rbt.indexOf(data.rbt) > -1) {
                                        this.cwbk.splice(j, 1);
                                    }
                                }
                            }
                            console.log(this.maxRow[row][i][tier]);
                        }
                    }
                } else if (val.type === "BBKCW") {
                    for (let i = 0; i < this.maxBay + 1; i++) {
                        if (i === 1 || i % 2 !== 0) {
                            console.log(i);
                            let data = {
                                ...val,
                                bayNo: setNum(i),
                                rowNo: setNum(row + 1),
                                tierNo: tier + 1,
                                rbt: setNum(i) + setNum(row + 1) + (tier + 1)
                            };
                            if (
                                maxRow[row][i][tier].type === "BBKCW" &&
                                !maxRow[row][i][tier].select
                            ) {
                                this.maxRow[row][i].splice(tier, 1, {
                                    ...val,
                                    select: true
                                });
                                this.cwbk.push(data);
                                console.log(this.cwbk);
                            } else if (
                                maxRow[row][i][tier].type === "BBKCW" &&
                                maxRow[row][i][tier].select
                            ) {
                                this.maxRow[row][i].splice(tier, 1, {
                                    ...val,
                                    select: false
                                });
                                for (let j = 0; j < this.cwbk.length; j++) {
                                    if (this.cwbk[j].rbt.indexOf(data.rbt) > -1) {
                                        this.cwbk.splice(j, 1);
                                    }
                                }
                            }
                            console.log(this.maxRow[row][i][tier]);
                        }
                    }
                }
            },
            changeUp(v) {
                let a = v.toUpperCase();
                this.$nextTick(() => {
                    this.condition["search_LIKE_containerNo"] = a;
                });
            }
        },
        destroyed() {
            //离开该页面需要移除这个监听的事件
            window.removeEventListener("scroll", this.handleScroll);
        },
        deactivated() {
            //离开该页面需要移除这个监听的事件
            window.removeEventListener("scroll", this.handleScroll);
        },
        computed: {
            bayWidth() {
                // 宽45PX,右边距2PX
                return (this.maxBay + 1) / 2 * 45 + (this.maxBay + 1) / 2 * 5;
            },
            rowHeight() {
                // 高32PX + 层高间隙2PX
                return this.maxTier * 32 + this.maxTier * 2 + 3;
            },
            cwbkArr() {
                return Array.from(new Set(this.cwbk));
            }
        },
        filters: {
            odd(index) {
                let val = index + 1;
                if (val % 2 !== 0) {
                    if (val < 10) {
                        return "0" + val;
                    } else {
                        return val;
                    }
                }
            },
            word(val) {
                return val && val.length > 6 ? val.substr(0, 5) + "..." : val;
            },
            zero(index) {
                return index < 10 ? "0" + index : index;
            }
        }
    };
</script>
<style scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .box-flex {
        display: flex;
        font-size: 12px;
    }

    .box-left {
        padding: 40px 10px 0 10px;
        width: 30px;
        background-color: black;
        color: #ffffff;
        text-align: center;
        position: absolute;
        z-index: 88;
    }

    .box-set {
        min-width: 600px;
        /* max-width: 600px; */
        max-height: 600px;
        /*margin-right: 30px;*/
        overflow: auto;
        position: relative;
        background-color: black;
    }

    .box-sets {
        /* min-width: 500px;
                max-width: 600px;
                max-height: 800px;
                overflow: auto; */
        position: relative;
        background-color: black;
    }

    .box-top-title {
        position: absolute;
        top: 3px;
    }

    .box-header {
        padding: 10px 0;
        height: 40px;
        margin-left: 40px;
        position: absolute;
        background-color: black;
        z-index: 100;
    }

    .box-headers {
        width: 47px;
        float: left;
        text-align: center;
        display: block;
        color: #ffffff;
        cursor: pointer;
        user-select: none;
    }

    .box-rows {
        position: relative;
        z-index: 99;
        left: 0;
    }

    .box-map-flex {
        border-top: 1px solid #ffffff;
        text-align: center;
        display: flex;
        justify-content: space-between;
    }

    .flexCenter {
        display: flex;
        align-items: center;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style-type: none;
    }

    body {
        font-family: Verdana, sans-serif;
    }

    .info-bg {
        cursor: pointer;
    }

    .row {
        display: flex;
        border-top: 1px solid #ffffff;
        padding: 2px 0 0 0;
    }

    .bay {
        margin-right: 2px;
        width: 45px;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .place {
        /* border: 1px solid rgb(245, 56, 56); */
        width: 45px;
        height: 32px;
        margin-bottom: 2px;
        cursor: pointer;
    }

    .place-demo {
        width: 25px;
        height: 17px;
        margin-right: 10px;
    }

    .place p {
        word-break: break-all;
        display: flex;
        align-items: center;
        text-align: left;
        font-size: 8px;
        padding: 0;
    }

    .placeChecked {
        border: 2px solid red;
    }

    .placeSelect {
        border: 2px dashed red;
    }

    .even {
        position: relative;
        width: 92px;
        height: 32px;
        justify-content: center;
    }

    .JKZX {
        background-color: #c28efd;
    }

    .CKZX {
        background-color: #f56c6c;
    }

    .BBKX {
        background-color: gold;
    }

    .KX {
        background-color: aquamarine;
    }

    .BXX {
        background-color: #ffffff;
        border: 2px solid red;
    }

    .BBKCW {
        background-color: #5c9dff;
    }

    .DCZLX {
        background-color: greenyellow;
    }

    .card-place {
        display: flex;
        margin-right: 20px;
        align-items: center;
        font-size: 13px;
    }

    .card-place span {
        font-size: 13px;
    }

    .box-card-top {
        display: flex;
        width: 280px;
        flex-wrap: wrap;
    }

    .box-font-style {
        text-align: left;
    }

    .box-font-style span {
        font-size: 13px !important;
    }

    .search-ul {
        display: inline-block;
        margin-left: 28px;
    }

    .search-ul li {
        display: inline-block;
    }
</style>


